@import 'theme';
@import 'functions';
@import 'mixins';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/dropdown';

//this hack here for now, until we decide how we go about keyboard navigation
// .dropdown:hover>.dropdown-menu,
// .dropdown:focus>.dropdown-menu {
//   display: block;
// }

//navigation color variables
$cx-navigation-item-border-bottom-color: 'background' !default;
$cx-navigation-link-color: 'inverse' !default;
$cx-navigation-link-focus-color: 'primary' !default;
$cx-navigation-link-hover-color: 'primary' !default;
$cx-navigation-link-md-color: 'text' !default;
$cx-navigation-child-item-border-color: 'background' !default;
$cx-navigation-child-item-hover-background-color: 'transparent' !default;
$cx-navigation-child-link-color: 'text' !default;
$cx-navigation-child-link-hover-color: 'primary' !default;
$cx-navigation-link-md-arrow-color: 'secondary' !default;
$cx-navigation-child-column-item-background-color: 'transparent' !default;

//navigation variables
$cx-navigation-text-case: capitalize !default;
$cx-navigation-item-trbl-padding: 0.5rem 0 !default;
$cx-navigation-item-border: 1px solid !default;
$cx-navigation-link-trbl-padding: 0.2rem 0 !default;
$cx-navigation-link-md-trbl-padding: 0.5rem 1.5rem !default;
$cx-navigation-link-md-trbl-margin: 20px !default;
$cx-navigation-link-lg-trbl-padding: 0.5rem 0 !default;
$cx-navigation-link-hover-cursor: pointer;
$cx-navigation-child-list-border-radius: 0 !default;
$cx-navigation-child-list-text-case: capitalize !default;
$cx-navigation-child-list-trbl-padding: 0 !default;
$cx-navigation-child-list-md-border: 0 none !default;
$cx-navigation-child-item-trbl-padding: 0.45rem 1.5rem;
$cx-navigation-child-item-border: 1px solid !default;
$cx-navigation-child-item-last-child-border: none !default;
$cx-navigation-child-item-md-border: none !default;
$cx-navigation-child-link-hover-text-decoration: none !default;
$cx-navigation-child-list-columns-border-radius: 0 !default;
$cx-navigation-child-list-columns-trbl-padding: 0.75rem !default;
$cx-navigation-child-list-columns-md-border: none !default;
$cx-navigation-child-list-columns-md-trbl-margin: 0 !default;
$cx-navigation-column-title-text-case: capitalize !default;
$cx-navigation-column-title-font-weight: bold !default;
$cx-navigation-column-title-trbl-padding: 0.25rem 1.5rem !default;
$cx-navigation-child-column-trbl-margin: 0 3rem 0 0 !default;
$cx-navigation-child-column-md-trbl-margin: 1rem unset 0 0 !default;
$cx-navigation-child-column-item-trbl-padding: 0.25rem 1.5rem !default;

.cx-navigation {
  &__item {
    @include media-breakpoint-down(md) {
      border-bottom: $cx-navigation-item-border;
      @include var-color(
        'border-bottom-color',
        $cx-navigation-item-border-bottom-color
      );
      padding: $cx-navigation-item-trbl-padding;
    }
  }
  &__link {
    @include var-color('color', $cx-navigation-link-color);
    text-transform: $cx-navigation-text-case;
    padding: $cx-navigation-link-trbl-padding;
    &:focus {
      @include var-color('color', $cx-navigation-link-focus-color);
    }
    &:hover {
      @include var-color('color', $cx-navigation-link-hover-color);
      cursor: $cx-navigation-link-hover-cursor;
    }

    @include media-breakpoint-down(md) {
      &::after {
        margin-right: $cx-navigation-link-md-trbl-margin;
        @include var-color('border-color', $cx-navigation-link-md-arrow-color);
        border-style: solid;
        border-width: 0 3px 3px 0;
        display: inline-block;
        padding: 5px;
      }
      &:hover::after {
        border-color: inherit;
      }
      &[aria-expanded='false'] {
        &::after {
          transform: rotate(45deg);
          -webkit-transform: rotate(45deg);
        }
      }
      &[aria-expanded='true'] {
        &::after {
          margin-top: 5px;
          transform: rotate(-135deg);
          -webkit-transform: rotate(-135deg);
        }
      }

      @include var-color('color', $cx-navigation-link-md-color);
      display: flex;
      justify-content: space-between;
      padding: $cx-navigation-link-md-trbl-padding;
    }

    @include media-breakpoint-only(lg) {
      padding: $cx-navigation-link-lg-trbl-padding;
    }
  }
  &__child-list {
    border-radius: $cx-navigation-child-list-border-radius;
    text-transform: $cx-navigation-child-list-text-case;
    padding: $cx-navigation-child-list-trbl-padding;
    @include media-breakpoint-down(md) {
      position: relative;
      border: $cx-navigation-child-list-md-border;
      width: 100%;
      top: 0 !important;
    }
  }
  &__child-item {
    border-bottom: $cx-navigation-child-item-border;
    @include var-color(
      'border-bottom-color',
      $cx-navigation-child-item-border-color
    );
    padding: $cx-navigation-child-item-trbl-padding;
    &:hover {
      @include var-color(
        'background-color',
        $cx-navigation-child-item-hover-background-color
      );
    }
    &:last-child {
      border-bottom: $cx-navigation-child-item-last-child-border;
    }
    @include media-breakpoint-down(md) {
      border-bottom: $cx-navigation-child-item-md-border;
    }
  }
  &__child-link {
    @include var-color('color', $cx-navigation-child-link-color);
    @include type('7');
    &:hover {
      @include var-color('color', $cx-navigation-child-link-hover-color);
      text-decoration: $cx-navigation-child-link-hover-text-decoration;
    }
  }
  &__child-list-columns {
    border-radius: $cx-navigation-child-list-columns-border-radius;
    padding: $cx-navigation-child-list-columns-trbl-padding;
    &.show {
      display: flex;
    }
    @include media-breakpoint-down(md) {
      flex-direction: column;
      position: static;
      width: 100%;
      border: $cx-navigation-child-list-columns-md-border;
      margin: $cx-navigation-child-list-columns-md-trbl-margin;
    }
  }
  //column option
  &__column-title {
    text-transform: $cx-navigation-column-title-text-case;
    @include type('7', $cx-navigation-column-title-font-weight);
    display: block;
    width: 100%;
    padding: $cx-navigation-column-title-trbl-padding;
  }
  &__child-column {
    margin-right: $cx-navigation-child-column-trbl-margin;
    @include media-breakpoint-down(md) {
      margin: $cx-navigation-child-column-md-trbl-margin;
    }
  }
  &__child-column-item {
    padding: $cx-navigation-child-column-item-trbl-padding;
    @include type('7');
    &:hover {
      @include var-color(
        'background-color',
        $cx-navigation-child-column-item-background-color
      );
    }
  }
}
